<template>
  <div class="text-left animate-fadeIn top-0 pt-2 pb-4">
    <h1 class="text-4xl font-bold text-white will-change-transform leading-relaxed text-shadow-lg">
      {{ word.content }}
    </h1>
    <div class="flex items-center justify-start gap-4 flex-wrap">
      <div v-if="word.usphone" class="flex items-center gap-2">
        <button @click="$emit('play-pronunciation', 'us')" class="text-white/70 hover:text-white">
          <EnglishPronunciationButton type="us" />
        </button>
        <div class="text-lg text-white/70 text-shadow-sm">/{{ word.usphone }}/</div>
      </div>
      <div v-if="word.ukphone" class="flex items-center gap-2">
        <button @click="$emit('play-pronunciation', 'uk')" class="text-white/70 hover:text-white">
          <EnglishPronunciationButton type="uk" />
        </button>
        <div class="text-lg text-white/70 text-shadow-sm">/{{ word.ukphone }}/</div>
      </div>
    </div>
    <div v-if="!showDefinition" class="flex flex-col items-start gap-2 my-8">
      <div class="w-20 h-0.5 bg-white/30"></div>
      <div class="w-12 h-0.5 bg-white/30"></div>
    </div>
    <div v-else class="text-xl text-white/90 mt-2 animate-fadeIn whitespace-pre-line text-shadow-md">
      {{ word.definition }}
    </div>
  </div>
</template>

<script setup>
import EnglishPronunciationButton from '@/components/icons/EnglishPronunciationButton.vue';

defineProps({
  word: {
    type: Object,
    required: true
  },
  showDefinition: {
    type: Boolean,
    default: false
  }
});

defineEmits(['play-pronunciation']);
</script>

<style scoped>
/* 动画效果 */
@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.animate-fadeIn {
  animation: fadeIn 0.3s ease-in-out;
}

/* 文本阴影效果 */
.text-shadow-sm {
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
}

.text-shadow-md {
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.4);
}

.text-shadow-lg {
  text-shadow: 0 3px 6px rgba(0, 0, 0, 0.5), 0 1px 3px rgba(0, 0, 0, 0.3);
}
</style> 